{% extends 'base.html' %}
{% from 'bootstrap/form.html' import render_field %}

{% block styles %}
  {{ super() }}
  <link href="{{ url_for_static('static', filename='plugins/bootstrap-table/bootstrap-table.min.css') }}" rel="stylesheet">
  <link href="{{ url_for_static('static', filename='plugins/bootstrap-select/css/bootstrap-select.min.css') }}" rel="stylesheet">
  <link href="{{ url_for_static('static', filename='css/setting/basic_setting.css') }}" rel="stylesheet">
{% endblock styles %}

{% block body_attribs %}
data-spy="scroll" data-target="#navbar-basic-setting" style="position: relative"
{% endblock %}

{% block app_content %}
<div class="row">
  <div class="col-lg-2">
    <nav id="navbar-basic-setting" class="navbar navbar-light bg-light" style="position: fixed">
      <!--<a class="navbar-brand" href="#">Navbar</a>-->
      <nav class="nav nav-pills flex-column">
{#        <a class="nav-link" href="#email">邮件设置</a>#}
        <a class="nav-link" href="#email-receiver-setting">邮件通知</a>
        <a class="nav-link" href="#ding-talk-robot-setting">钉钉通知</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link svg-bi-arrow-up-circle-fill" href="#">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-up-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"></path>
            </svg>
            顶部
          </a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-lg-10">
    <div data-spy="scroll" data-target="#navbar-basic-setting" data-offset="0">
{#      <h2 id="email">邮件设置</h2>#}
{#      <form method="post" action="{{ url_for('setting.basic_setting') }}">#}
{#        {{ form.csrf_token() }}#}
{#        {{ render_field(form.whether_send_email) }}#}
{#        {{ render_field(form.whether_gen_report) }}#}
{#        {{ render_field(form.email_title) }}#}
{#        {{ render_field(form.email_text) }}#}
{#        {{ render_field(form.receiver_address) }}#}
{#        {{ render_field(form.submit, class="btn btn-primary") }}#}
{#      </form>#}
      <h2 class="mt-2" id="email-receiver-setting">邮件通知</h2>
      <div class="btn-toolbar" role="toolbar" id="table-email-receiver-setting-toolbar">
        <div class="btn-group mr-2" role="group">
          <button type="button" class="btn btn-primary" id="btn-add-email-receiver">新增</button>
        </div>
      </div>
      <table id="table-email-receiver-setting"></table>
      <h2 class="mt-2" id="ding-talk-robot-setting">钉钉通知</h2>
      <div class="btn-toolbar" role="toolbar" id="table-ding-talk-robot-setting-toolbar">
        <div class="btn-group mr-2" role="group">
          <button type="button" class="btn btn-primary" id="btn-add-ding-talk-robot">新增</button>
        </div>
      </div>
      <table id="table-ding-talk-robot-setting"></table>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-add-ding-talk-robot-setting" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">新增钉钉机器人</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>是否启用</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-add-ding-talk-robot-enable" id="input-add-ding-talk-robot-enable-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-add-ding-talk-robot-enable" id="input-add-ding-talk-robot-enable-no" autocomplete="off" checked> 否
            </label>
          </div>
          <label>@全体成员</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-add-ding-talk-robot-at-all" id="input-add-ding-talk-robot-at-all-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-add-ding-talk-robot-at-all" id="input-add-ding-talk-robot-at-all-no" autocomplete="off" checked> 否
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="input-add-ding-talk-robot-access-token">AccessToken</label>
          <input type="text" class="form-control" id="input-add-ding-talk-robot-access-token" placeholder="请输入access_token">
        </div>
        <div class="form-group">
          <label for="input-add-ding-talk-robot-secret">密钥</label>
          <input type="text" class="form-control" id="input-add-ding-talk-robot-secret" placeholder="请输入密钥secret">
        </div>
        <div class="form-group">
          <label for="input-add-ding-talk-robot-at-mobiles">@成员(登记手机号)</label>
          <input type="text" class="form-control" id="input-add-ding-talk-robot-at-mobiles" placeholder="请输入需要@成员的手机号，多个成员以,分割">
        </div>
        <div class="form-group">
          <label for="select-add-ding-talk-robot-projects">关联项目</label>
          <select id="select-add-ding-talk-robot-projects" class="selectpicker" multiple data-width="100%" data-actions-box="true">
            {% for project in projects %}
            <option value="{{ project.id }}" data-subtext="(project_id: {{ project.id }})">{{ project.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button id="btn-save-add-ding-talk-robot-setting" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-modify-ding-talk-robot-setting" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">修改钉钉机器人</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="input-modify-ding-talk-robot-id" placeholder="" disabled style="display: none"/>
        <div class="form-group">
          <label>是否启用</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-modify-ding-talk-robot-enable" id="input-modify-ding-talk-robot-enable-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-modify-ding-talk-robot-enable" id="input-modify-ding-talk-robot-enable-no" autocomplete="off" checked> 否
            </label>
          </div>
          <label>@全体成员</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-modify-ding-talk-robot-at-all" id="input-modify-ding-talk-robot-at-all-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-modify-ding-talk-robot-at-all" id="input-modify-ding-talk-robot-at-all-no" autocomplete="off" checked> 否
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="input-modify-ding-talk-robot-access-token">AccessToken</label>
          <input type="text" class="form-control" id="input-modify-ding-talk-robot-access-token" placeholder="请输入access_token">
        </div>
        <div class="form-group">
          <label for="input-modify-ding-talk-robot-secret">密钥</label>
          <input type="text" class="form-control" id="input-modify-ding-talk-robot-secret" placeholder="请输入密钥secret">
        </div>
        <div class="form-group">
          <label for="input-modify-ding-talk-robot-at-mobiles">@成员(登记手机号)</label>
          <input type="text" class="form-control" id="input-modify-ding-talk-robot-at-mobiles" placeholder="请输入需要@成员的手机号，多个成员以,分割">
        </div>
        <div class="form-group">
          <label for="select-modify-ding-talk-robot-projects">关联项目</label>
          <select id="select-modify-ding-talk-robot-projects" class="selectpicker" multiple data-width="100%" data-actions-box="true">
            {% for project in projects %}
            <option value="{{ project.id }}" data-subtext="(project_id: {{ project.id }})">{{ project.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button id="btn-save-modify-ding-talk-robot-setting" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-add-email-receiver-setting" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">新增邮件收件人</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>是否启用</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-add-email-receiver-enable" id="input-add-email-receiver-enable-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-add-email-receiver-enable" id="input-add-email-receiver-enable-no" autocomplete="off" checked> 否
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="input-add-email-receiver-name">名称</label>
          <input type="text" class="form-control" id="input-add-email-receiver-name" placeholder="请输入收件人名称">
        </div>
        <div class="form-group">
          <label for="input-add-email-receiver-address">邮箱地址</label>
          <input type="text" class="form-control" id="input-add-email-receiver-address" placeholder="请输入邮箱地址">
        </div>
        <div class="form-group">
          <label for="select-add-email-receiver-projects">关联项目</label>
          <select id="select-add-email-receiver-projects" class="selectpicker" multiple data-width="100%" data-actions-box="true">
            {% for project in projects %}
            <option value="{{ project.id }}" data-subtext="(project_id: {{ project.id }})">{{ project.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button id="btn-save-add-email-receiver-setting" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-modify-email-receiver-setting" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">修改邮件收件人</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="input-modify-email-receiver-id" placeholder="" disabled style="display: none"/>
        <div class="form-group">
          <label>是否启用</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-modify-email-receiver-enable" id="input-modify-email-receiver-enable-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="input-modify-email-receiver-enable" id="input-modify-email-receiver-enable-no" autocomplete="off" checked> 否
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="input-modify-email-receiver-name">名称</label>
          <input type="text" class="form-control" id="input-modify-email-receiver-name" placeholder="请输入收件人名称">
        </div>
        <div class="form-group">
          <label for="input-modify-email-receiver-address">邮箱地址</label>
          <input type="text" class="form-control" id="input-modify-email-receiver-address" placeholder="请输入邮箱地址">
        </div>
        <div class="form-group">
          <label for="select-modify-email-receiver-projects">关联项目</label>
          <select id="select-modify-email-receiver-projects" class="selectpicker" multiple data-width="100%" data-actions-box="true">
            {% for project in projects %}
            <option value="{{ project.id }}" data-subtext="(project_id: {{ project.id }})">{{ project.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button id="btn-save-modify-email-receiver-setting" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

{% endblock app_content %}

{% block scripts %}
  {{ super() }}
  <script src="{{ url_for_static('static', filename='plugins/bootstrap-table/bootstrap-table.min.js') }}"></script>
  <script src="{{ url_for_static('static', filename='plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js') }}"></script>
  <script src="{{ url_for_static('static', filename='plugins/bootstrap-select/js/bootstrap-select.min.js') }}"></script>
  <script src="{{ url_for_static('static', filename='js/setting/basic_setting.js') }}"></script>
{% endblock %}